<template>
	<up-tabbar height="84px" :border="false" :placeholder="placeholder" :safeAreaInsetBottom="false" :value="index"
		:activeColor="index == 3 ? '#FEE9B2' : '#000000'" :inactiveColor="index == 3 ? '#797C86' : infoColor">
		<view class="w-[100%] pb-[68rpx] pt-[20rpx] flex h-[170rpx] rounded-t-[30rpx]" :style="index == 3 ? {background: '#000'} : {background: '#fff'}">
			<up-tabbar-item :name="1" text="首页" @click="pushs">
				<template #active-icon> 
					<image src="/static/images/tabbar/syxz.png" style="width: 50rpx; height: 50rpx;" />
				</template>
				<template #inactive-icon>
					<image src="/static/images/tabbar/sy.png" style="width: 50rpx; height: 50rpx;" />
				</template>
			</up-tabbar-item>
			<up-tabbar-item :name="2" text="批发" @click="pushs">
				<template #active-icon>
					<view class="relative">
						<image src="/static/images/tabbar/pfxz.png" style="width: 50rpx; height: 50rpx;" />
						<image src="/static/images/icon/qc.png" class="absolute top-[-10rpx] right-[-10rpx] w-[32rpx] z-[999] h-[20rpx]" />
					</view>
				</template>
				<template #inactive-icon>
					<view class="relative">
						<image src="/static/images/tabbar/pf.png" style="width: 50rpx; height: 50rpx;" />
						<image src="/static/images/icon/qc.png" class="absolute top-[-10rpx] right-[-10rpx] w-[32rpx] z-[999]  h-[20rpx]" />
					</view>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :name="3" text="会员" :badge="imStore.total" @click="pushs">
				<template #active-icon>
					<image src="/static/images/tabbar/hyxz.png" style="width: 50rpx; height: 50rpx;" />
				</template>
				<template #inactive-icon>
					<image src="/static/images/tabbar/hy.png" style="width: 50rpx; height: 50rpx;" />
				</template>
			</up-tabbar-item>
			<up-tabbar-item :name="4" text="收车" :badge="imStore.total" @click="pushs">
				<template #active-icon>
					<view class="relative">
						<image class="relative z-[10]" src="/static/images/tabbar/scxz.png" style="width: 50rpx; height: 50rpx;" />
						<image src="/static/images/img/bw.png" class="absolute top-[-10rpx] right-[-10rpx] w-[32rpx] h-[20rpx] z-[100]" />
					</view>
				</template>
				<template #inactive-icon>
					<view class="relative">
						<image src="/static/images/tabbar/sc.png" style="width: 50rpx; height: 50rpx;" />
						<image src="/static/images/img/bw.png" class="absolute top-[-10rpx] right-[-10rpx] w-[32rpx] h-[20rpx]" />
					</view>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :name="5" text="我的" @click="pushs">
				<template #active-icon>
					<image src="/static/images/tabbar/myxz.png" style="width: 50rpx; height: 50rpx;" />
				</template>
				<template #inactive-icon>
					<image src="/static/images/tabbar/my.png" style="width: 50rpx; height: 50rpx;" />
				</template>
			</up-tabbar-item>
		</view>
	</up-tabbar>
</template>


<script setup>
import { onMounted, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import useTabBerStore from '@/store/modules/tabBar';
import useUserStore from '@/store/modules/user';
import { toast, showConfirm, tansParams } from '@/utils/common';
import useImStore from '@/store/modules/im';
const imStore = useImStore();
const props = defineProps({
	placeholder: {
		type: Boolean,
		default: true
	}
});
const tabStore = useTabBerStore();
const index = ref(tabStore.index);
const list = ref(['/pages/index', '/pages/whoable', '/pages/member', '/pages/sc', '/pages/user']);
const push = async (i) => {
	uni.switchTab({
		url: list.value[i - 1]
	});
};
const pushs = (i) => {
	tabStore.setIndex(i);
	push(i);
};
onMounted(() => { });
onShow(() => {
	const pages = getCurrentPages(); // 获取当前页面栈
	const currentPage = pages[pages.length - 1]; // 当前页面
	const currentPath = currentPage.route; // 当前页面路径
	const i = list.value.findIndex((item) => item == `/${currentPath}`) + 1;
	tabStore.setIndex(i);
	index.value = i;
});
</script>

<style lang="scss">
// .u-tabbar__content {
// 	padding-top: 22rpx !important;
// 	padding-bottom: 22rpx !important;
// 	border-top-left-radius: 25px !important;
// 	border-top-right-radius: 25px !important;
// }

</style>
